<template>
	<view class="page-login">


		<view>
			<view class="module-canvans" v-if="defaultWidth" style="height: 600rpx;">
				<!-- <view :class="(showImg || showImgHandle)?'canvanHide':''"> -->
					<view :class="(showImg || showImgHandle || showAddWord || showTips || showAllPic)?'canvanHide':''">
					<canvas-drag pageType="widget" :class="(showImg || showImgHandle || showAddWord || showTips || showAllPic)?'canvanHide':''" ref="canvasRef" id="canvas-drag" :graph="graph" :width="375" :height="300"
						enableUndo="true" @getIndex="getIndex"></canvas-drag>
				</view>
			</view>
			<view class="u-flex bm p15">
				<view @click="popupList=localList,curFiled='local',showPopup=true" class="fz12 mr20">
					位置：{{localList[form.local]}}<u-icon class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
				<view @click="popupList=fuList,curFiled='fu',showPopup=true" class="fz12">辅助线：{{fuList[form.fu]}}<u-icon
						class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
			</view>


			<scroll-view style="height: 500rpx;" :scroll-y="true">

				<view class="page-content ">
					<!-- <u-tabs :list="tabList" active-color="#70B52C" :is-scroll="true" :current="current"
						@change="change"></u-tabs> -->
					<view v-if="themeList.length>0" class="theme-list bt bm pt20 pl15 pr15  bg-white">
						<view class="item" v-for="(item,index) in themeList" @click="themeClick(index)" :key="index"
							:class="curTheme==index?'on':''">
							<view class="item-img w40 h40 brs-50">
								<image :src="item.picUrl" class=" w40 h40 brs-50" mode="aspectFit"></image>
							</view>
							<view class="item-title fz12 mt10">{{item.name}}</view>
						</view>
					</view>
					<view class="">

						<view class="u-flex bg-white" style="flex-wrap: wrap;">
							<view style="" @click="toSelect(item)" style="width: 33.33%;min-width:  33.33%;"
								class="mb10" v-for="(item,index) in dataList" :key="index">

								<view>
									<view class="p10">

										<view class="u-flex u-f-justify" style="background: #f5f5f5;">
											<image :src="item.picUrl" style="height:120rpx;" mode="heightFix"></image>
										</view>
										<view class="u-flex u-f-jsb fz12 mt10" style="color: #19291C;">
											<span class="u-line-1">{{item.name}}</span>
											<span>￥{{item.price}}</span>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class=" mt10">

							<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
						</view>
						<view class="order-none u-flex u-f-justify fz16 c9 p50" v-if="dataList.length<=0">
							暂无数据！
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="fixed-bottom p15">
				<view class="u-flex module-next p15" v-if="curCeng==-1">
					<view class="u-flex u-f-jsb u-f1 pr20">
						<view class="item" :class="[curAction==0?'on':'']" @click="curAction=0">
							<u-icon name="trash"></u-icon>
							<view class="fz12">清空画布</view>
						</view>
						
						<view class="item" :class="[curAction==2?'on':'']" @click="curAction=2,onExport()">
							<u-icon name="eye"></u-icon>
							<view class="fz12">预览效果</view>
						</view>
					</view>
					<view class="btn-sure" @click="toShow">确定</view>
				</view>

				<view class="u-flex u-f-jsb bt pt10 pl20 pr20" style="text-align: center;" v-else>
					<view class="item">
						<u-icon name="bookmark"></u-icon>
						<view class="fz12">复制图层</view>
					</view>
					<view @click="setSort(1)">
						<u-icon name="edit-pen"></u-icon>
						<view>上移一层</view>
					</view>
					<view @click="setSort(2)">
						<u-icon name="edit-pen"></u-icon>
						<view>下移一层</view>
					</view>
				</view>
			</view>
		</view>


		<u-picker @confirm="popupConfirm" mode="selector" v-model="showPopup" :range="popupList"></u-picker>


		
		<u-popup v-model="showTips" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 600rpx;">
				<image src="../../static/image/ic-first-tips.png"
					style="display: block;margin: 0 auto;width: 72rpx;height: 72rpx;"></image>
				<view class="fz14 p15">
					{{remarkTips}}


				</view>
				<button class="bon" @click="showTips=false">确认</button>
			</view>
		</u-popup>
<u-popup duration="0" :mask-close-able="false" v-model="showImg" mode="center" border-radius="20"
			:closeable="false">
			<view class="p20" style="width: 700rpx;">
				<image style="width: 100%;" class="mb20" :src="curImg" mode="widthFix"></image>

				<button class="bon" @click="closeImg">关闭</button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import canvasDrag from "@/components/canvas-drag/index";
	export default {
		components: {
			canvasDrag
		},
		data() {
			return {
				graph: {},
				prodInfo:{},
				curCeng: -1,
				defaultLength:'',
				defaultWidth:'',
				curCengInfo: {},
				canvasBg: "",
				showAddWord: false,
				addWord: '',
				showImg:false,
				current: 0,
				showAllPic: false,
				showPopup: false,
				popupList: [],
				curAction: 0,
				form: {
					local: 0,
					fu: 0
				},
				localList: ['正面', '背面'],
				fuList: ['开', '关'],
				curFiled: 'local',
				showTips: false,
				curImg:'',
				tabList: [],
				otherTabList: [],
				curTab: 2,
				psdUrl:'',
				currentType: 1,
				curTheme: 0,
				current: 0,
				loadStatus: 'more',
				scrollHeight: 300,
				dataList: [],
				remarkTips:'',
				themeList: [],
				page: 1,
			}
		},
		onLoad(e) {
			// e.id = 100
			// e.prodId = 21
			
				this.showTips = true
			// if (!this.$db.get('diySecondTips')) {
			// 	this.showTips = true
			// 	this.$db.set('diySecondTips', true)
			// }
			this.$api.dictList({
				dictType: 'diy_word'
			}, res => {
				if (res.code == 200) {
					this.remarkTips=res.data[2].remark
				}
			})
			this.$api.categoryAll({
				parentId: 34,
			}, res => {
				if (res.code == 200) {
					res.data.some((item, index) => {
						if (item.id == e.id) {
							this.current = index
						}
					})
					this.tabList = res.data
					this.getSecondList()
				}
			})
			
			
			
			this.$api.productInfo({
				id: e.prodId
			}, res => {
				if (res.code == 200) {
					this.prodInfo = res.data
					this.defaultWidth = res.data.defaultWidth
					this.defaultLength = res.data.defaultLength
					this.getSw(res.data.swUrl)
					this.onChangeBgImage(res.data.cxPreviewUrl)
				}
			})
		},
		methods: {
			
				closeImg() {
					this.onChangeBgImage(this.prodInfo.cxPreviewUrl)
					setTimeout(() => {
			
						this.showImg = false
					}, 10)
				},
			getSw(url) {
			
				if (this.$db.get('curSku')) {
					let curSku = this.$db.get('curSku')
					let attr = []
					curSku.properties.some((item) => {
						let i = {
							name: item.propertyName,
							value: item.valueName,
						}
						attr.push(i)
					})
			
			
					this.$api.diySwPreview({
						url,
						attrs: JSON.stringify(attr)
					}, res => {
						if (res.code == 200) {
							this.psdUrl = res.data
						}
					})
				}
			},
			toSelect(item) {

				wx.getImageInfo({
					src: item.picUrl,
					complete: (res) => {
						console.log(res,12345)
						this.setData({
							graph: {
								w: 100,
								h: 100,
								type: 'image',
								url: res.path
							}
						});
						this.showAllPic = false
					}
				})
			},
			getIndex(res) {
				console.log(res)
				this.curCeng = res.index
				this.curCengInfo = res.info
			},
			setSort(type) {

				this.$refs.canvasRef.changSort(this.curCeng, type)
			},
			toShow() {

				uni.navigateTo({
					url: '/pages/diy/show'
				})
			},
			cateChange(e) {
				this.current = e
			},
			popupConfirm(e) {
				console.log(e, 12)
				let ids = e[0]
				this.form[this.curFiled] = ids
			},

			setWord() {
				this.addWord = this.curCengInfo.text
				this.showAddWord = true
			},
			/**
			 * 添加测试图片
			 */
			onAddTest() {
				this.setData({
					graph: {
						w: 120,
						h: 120,
						type: 'image',
						url: "/static/assets/images/test.jpg"
					}
				});
			},

			/**
			 * 添加图片
			 */
			onAddImage() {
				wx.chooseImage({
					success: res => {
						this.setData({
							graph: {
								w: 200,
								h: 200,
								type: 'image',
								url: res.tempFilePaths[0]
							}
						});
					}
				});
			},

			/**
			 * 添加文本
			 */
			onAddText() {

				if (this.curCeng == -1) {

					this.setData({
						graph: {
							type: 'text',
							text: this.addWord
						}
					});
				} else {

					this.$refs.canvasRef.changText(this.curCeng, this.addWord)
				}
				this.addWord = ''
			},

			
			/**
			 * 导出图片
			 */
			onExport() {
			
			
			
			
			
			
				this.showImg = true
			
				wx.getImageInfo({
					src: this.psdUrl,
					complete: (res) => {
						console.log(res.path, 1111)
						this.$refs.canvasRef.changeBgImage1(res.path)
			
			
						setTimeout(() => {
			
							this.$refs.canvasRef.exportFun().then(filePath => {
								console.log(filePath);
								this.curImg = filePath
							}).catch(e => {
								console.error(e);
							});
						}, 50)
					}
				})
			
			},

			/**
			 * 改变文字颜色
			 */
			onChangeColor() {
				this.$refs.canvasRef.changColor('blue');
			},

			/**
			 * 改变背景颜色
			 */
			onChangeBgColor() {
				this.$refs.canvasRef.changeBgColor('yellow');
			},

			
			/**
			 * 改变背景照片
			 */
			onChangeBgImage(url) {
			
			
				wx.getImageInfo({
					src: url,
					complete: (res) => {
			
						this.$refs.canvasRef.changeBgImage(res.path)
					}
				})
			},

			/**
			 * 导出当前画布为模板
			 */
			onExportJSON() {
				console.log(this.$refs.canvasRef, 1111111111111)
				this.$nextTick(() => {

					this.$refs.canvasRef.exportJson().then(imgArr => {
						console.log(JSON.stringify(imgArr));
					}).catch(e => {
						console.error(e);
					});
				})
			},

			onImport() {
				// 有背景
				// let temp_theme = [{"type":"bgColor","color":"yellow"},{"type":"image","url":"../../assets/images/test.jpg","y":98.78423143832424,"x":143.78423143832424,"w":104.43153712335152,"h":104.43153712335152,"rotate":-12.58027482265038,"sourceId":null},{"type":"text","text":"helloworld","color":"blue","fontSize":24.875030530031438,"y":242.56248473498428,"x":119.57012176513672,"w":116.73966979980469,"h":34.87503053003144,"rotate":8.873370699754087}];
				// 无背景
				let temp_theme = [{
					"type": "image",
					"url": "/static/assets/images/test.jpg",
					"y": 103,
					"x": 91,
					"w": 120,
					"h": 120,
					"rotate": 0,
					"sourceId": null
				}, {
					"type": "text",
					"text": "helloworld",
					"color": "blue",
					"fontSize": 20,
					"y": 243,
					"x": 97,
					"rotate": 0
				}];
				this.$refs.canvasRef.initByArr(temp_theme);
			},

			onClearCanvas: function(event) {
				let _this = this;

				_this.setData({
					canvasBg: null
				});
				this.$refs.canvasRef.clearCanvas();

				this.onChangeBgImage(this.prodInfo.cxPreviewUrl)
			},
			onUndo: function(event) {
				this.$refs.canvasRef.undo();
			},
			change(e) {
				this.current = e
				this.getSecondList()

			},
			themeClick(idx) {
				this.curTheme = idx
				this.initData()
			},
			getSecondList() {
				this.themeList = []
				this.tabList.some((item, index) => {

					this.$api.categoryAll({
						parentId: item.id,
					}, res => {
						if (res.code == 200) {
							this.themeList = [...this.themeList, ...res.data]

							if (index == 0) {
								this.initData()
							}
						}
					})
				})
			},
			initData() {
				this.page = 1
				this.dataList = []
				this.getData()

			},
			getData() {
				console.log(this.currentType, 111111111)
				let post = {
					pageNo: this.page,
					pageSize: 10,
					categoryId: this.themeList[this.curTheme].id
				}
				this.$api.productSearch(post, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			}


		},
	}
</script>

<style lang="scss">
	.module-canvans {
		
			display: flex;
			align-items: center;
			justify-content: center;
		// background: #f5f5f5;
	}

	.bon {
		width: 100%;
		background: #70B52C;
		padding: 15rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}


	.sku-item {
		width: 33.33%;
		min-width: 33.33%;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 24rpx;

		.sku-item-content {

			border: 1px solid #f5f5f5;
			background: rgba(25, 41, 28, 0.05);
			margin: 0 10rpx;
		}

		&.on {
			.sku-item-content {

				border: 1px solid #70B52C;
				color: #70B52C;
			}
		}
	}

	.module-action {
		.action-item {

			border-radius: 8rpx;
			border: none;
			background: rgba(25, 41, 28, 0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
			width: 200rpx;
			font-size: 24rpx;
			text-align: center;
			margin: 0 15rpx;

		}
	}

	.btn-sure {

		width: 160rpx;
		text-align: center;
		background: #70B52C;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.module-next {
		background: rgba(25, 41, 28, 0.05);
		border-radius: 16rpx;

		.item {
			text-align: center;
			font-size: 40rpx;

			&.on {
				color: #FE3307;
			}
		}
	}


	.theme-list {
		display: flex;
		text-align: center;
		overflow: auto;

		.item {
			padding: 0 30rpx 30rpx;

			&.on {
				border-bottom: 1px solid #70B52C;

				.item-img {
					border: 1px solid #70B52C;
				}
			}
		}

		.item-img {
			overflow: hidden;
			background: #F4F4F4;
		}

		.item-title {
			color: #19291C;
		}
	}
	
	
	.page-diy {
		padding: 0 0 300rpx;
	}
	.canvanHide{
		transform: translate(-100%,-100%);
		
	}
</style>